1import Box from '@mui/material/Box';
  2import Container from '@mui/material/Container';
  3import {useTheme} from '@mui/material/styles';
  4import {PropsWithChildren} from 'react';
  5import pageUtils from '../../../lib/pageUtils';
  6import useEventStore from '../../../stores/useEventStore';
  7import EventLayout, {TabComponent} from '../../../layouts/Event';
  8import {
  9  EventByUuidDocument,
 10  Module,
 11  ModuleDocument,
 12  Enum_Userspermissionsuser_Lang as SupportedLocales,
 13} from '../../../generated/graphql';
 14import CarosterPlusOption from '../../../containers/CarosterPlusOption';
 15import CarosterPlusSettings from '../../../containers/CarosterPlusSettings';
 16import {Card, Typography} from '@mui/material';
 17import {useTranslation} from 'react-i18next';
 18
 19interface Props {
 20  modulesSettings?: Module;
 21  eventUUID: string;
 22  announcement?: string;
 23}
 24
 25const Page = (props: PropsWithChildren<Props>) => {
 26  return <EventLayout {...props} Tab={OptionsTab} />;
 27};
 28
 29const OptionsTab: TabComponent<Props> = ({modulesSettings}) => {
 30  const {t} = useTranslation();
 31  const theme = useTheme();
 32  const event = useEventStore(s => s.event);
 33
 34  if (!event) return null;
 35
 36  const carosterPlusActivated =
 37    event.enabled_modules?.includes('caroster-plus');
 38
 39  return (
 40    <Box position="relative">
 41      <Container
 42        sx={{
 43          p: 4,
 44          mt: 6,
 45          mb: 11,
 46          mx: 0,
 47          [theme.breakpoints.down('md')]: {
 48            p: 2,
 49          },
 50        }}
 51      >
 52        {carosterPlusActivated && <CarosterPlusSettings event={event} />}{' '}
 53        {modulesSettings?.caroster_plus_enabled && (
 54          <CarosterPlusOption event={event} modulesSettings={modulesSettings} />
 55        )}
 56        {!modulesSettings?.caroster_plus_enabled && (
 57          <Typography variant="overline">{t`options.no_module`}</Typography>
 58        )}
 59      </Container>
 60    </Box>
 61  );
 62};
 63
 64export const getServerSideProps = pageUtils.getServerSideProps(
 65  async (context, apolloClient) => {
 66    const {uuid} = context.query;
 67    const {host = ''} = context.req.headers;
 68    let event = null;
 69    let modulesSettings = null;
 70
 71    // Fetch event
 72    try {
 73      const {data} = await apolloClient.query({
 74        query: EventByUuidDocument,
 75        variables: {uuid},
 76      });
 77      event = data?.eventByUUID?.data;
 78    } catch (error) {
 79      return {
 80        notFound: true,
 81      };
 82    }
 83
 84    // Fetch modules settings
 85    try {
 86      const {data} = await apolloClient.query({
 87        query: ModuleDocument,
 88        variables: {locale: context.locale},
 89      });
 90      modulesSettings = data?.module?.data?.attributes || {};
 91
 92      const {caroster_plus_description, caroster_plus_name} = modulesSettings;
 93
 94      if (
 95        caroster_plus_description &&
 96        caroster_plus_name &&
 97        String(caroster_plus_description).length === 0 &&
 98        String(caroster_plus_name).length === 0
 99      ) {
100        console.warn(
101          'Module settings are not set for locale: ',
102          context.locale,
103          ' fallback to English'
104        );
105        const {data: enData} = await apolloClient.query({
106          query: ModuleDocument,
107          variables: {locale: SupportedLocales['en']},
108        });
109        modulesSettings = enData?.module?.data?.attributes;
110      }
111    } catch (error) {
112      console.error(error);
113    }
114
115    return {
116      props: {
117        modulesSettings,
118        eventUUID: uuid,
119        metas: {
120          title: event?.attributes?.name || '',
121          url: `https://${host}${context.resolvedUrl}`,
122        },
123      },
124    };
125  }
126);
127export default Page;